<template>
    <div class="my">
      <img :src="state" alt="" style="width: 100%">
      <div class="sz">
        <router-link to="/sz"><i class="iconfont">&#xe607;</i></router-link>
      </div>
      <header>
        <img :src="avatar" alt="">
        <span>七月上</span>
        <span>汗水的魅力永远大于香水</span>
        <router-link to="/zl" exact>
          <i class="iconfont">&#xe628;</i>
        </router-link>
      </header>
      <div class="my_div message">消息通知</div>
      <div></div>
      <div class="my_div">数据中心</div>
      <div class="my_div">我的目标</div>
      <div class="my_div">步数记录</div>
      <div class="my_div message">打卡记录</div>
      <div></div>
      <div class="my_div">健身历史</div>
      <div class="my_div">运动路线</div>
      <div class="my_div message">收藏</div>
      <BottomNav></BottomNav>
    </div>
</template>

<script>
  import BottomNav from '@/components/BottomNav.vue';

  export default {
        name: "My",
        data(){
          return{
            avatar:require('../../assets/imgs/home/team-image-7.jpg'),
            state: require('../../assets/imgs/state.png'),
          }
        },
        components:{
          BottomNav
        }
    }
</script>

<style scoped lang="less">
  .my{
    background-color: #181718;
    .sz{
      width: 100%;
      height: 50px;
      background-color: #181718;
      i{
        color: #FFFFFF;
        position: absolute;
        right: 20px;
        top: 30px;
      }
    }
    header{
      i{
        position: absolute;
        right: 20px;
        top: 120px;
        font-size: 20px;
        color: #181718;
      }
      width: 100%;
      height: 140px;
      background-color: #FEDA05;
      img{
        float: left;
        width: 72px;
        height: 72px;
        margin-top: 34px;
        margin-left: 20px;
        border-radius: 100%;
      }
      span:nth-child(2){
        float: left;
        margin-top: 96/2px;
        margin-left: 20px;
        font-size: 20px;
        color: #171818;
      }
      span:nth-child(3){
        position: absolute;
        top: 143px;
        left: 113px;
        font-size: 15px;
      }
    }
    div{
      width: 100%;
      height: 7.5px;
      background-color: #efefef;
    }
    .my_div{
      color: #171818;
      font-size: 15px;
      letter-spacing: 3px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      box-sizing: border-box;
      background-color: #FFFFFF;
      text-align: left;
      border-bottom: 1px solid #efefef;
    }
    .my_div.message{
      border: none;
    }
  }
</style>
